<template>
  <div>
    <h2 style="text-align: center">销售出库</h2>
    <table width="100%">
       <tr><td>客户<input v-model="sellObj.client"></td>
        <td>销售员：{{loginUser.realName}}</td><td>订单总额：{{computPrice()}}</td></tr>
      <tr style="height: 20px;font-size: 12px;color: red"><td>{{errorInfo}}</td></tr>
    </table>
    <el-table :data="sellList" border stripe style="width: 100%">
      <el-table-column prop="product.name" label="商品名称"  />
      <el-table-column prop="price" label="建议销售价"  />
      <el-table-column prop="product.saveNumber" label="现有库存"  />
      <el-table-column label="销售数量" >
        <template #default="scope">
          <el-input  type="primary" size="small" v-model="scope.row.number" @blur="updateNumber(scope.row)"></el-input>
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="220">
        <template #default="scope">
          <el-button  type="primary" size="small" @click="removeProduct(scope.row)">移除商品</el-button>
        </template>
      </el-table-column>
    </el-table>

    <div style="margin-top: 20px;text-align: center">
      <el-button  type="primary" size="small" @click="showAddDialog()">添加商品</el-button>
      <el-button  type="success" size="small" @click="outRespository()">出库</el-button>
    </div>

    <!--添加销售商品对话框-->
    <el-dialog
        v-model="showAdd"
        title="添加销售商品"
        width="80%"
    >
      <el-table :data="cutObj.records" border stripe style="width: 100%">
        <el-table-column prop="name" label="商品名"  />
        <el-table-column prop="type" label="类别"  />
        <el-table-column prop="saveNumber" label="库存数量"  />
        <el-table-column fixed="right" label="操作" width="220">
          <template #default="scope">
            <el-button  type="primary" size="small" @click="addProduct(scope.row)">添加</el-button>
          </template>
        </el-table-column>
      </el-table>

      <el-pagination
          v-model:current-page="cutObj.current"
          v-model:page-size="cutObj.size"
          background
          layout="prev, pager, next, jumper"
          :total="cutObj.total"
          @current-change="findByItem"
      />

      <el-row>
        <el-col :span="12"></el-col>
        <el-col :span="10" style="margin-top:10px;padding-top:10px;padding-right:50px;box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);width: 300px;height: 150px;">
          <el-form
              label-width="120px"
              class="demo-ruleForm"
              status-icon
          >
            <el-form-item label="商品名">
              <el-input v-model="queryObj.name" />
            </el-form-item>

            <el-form-item label="类别">
              <el-select v-model="queryObj.type" class="m-2" placeholder="请选择类别" size="large">
                <el-option  label="电脑产品" value="电脑产品"/>
                <el-option  label="安防产品" value="安防产品"/>
                <el-option  label="打印扫描设备" value="打印扫描设备"/>
                <el-option  label="办公耗材" value="办公耗材"/>
              </el-select>
            </el-form-item>

            <el-form-item>
              <el-button type="primary" @click="findByItem(1)">
                <el-icon style="font-size: 20px;padding-right: 10px;"><Search /></el-icon>查询
              </el-button>
            </el-form-item>
          </el-form>
        </el-col>
        <el-col :span="2"></el-col>
      </el-row>



      <template #footer>
      <span class="dialog-footer">
        <el-button type="primary" @click="showAdd = false">取消</el-button>
      </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import axios from "axios";
import {ElMessageBox } from 'element-plus'

export default {
  data() {
    return {
      errorInfo:"",//错误提示信息
      showAdd:false,//是否显示添加商品对话框
      sellObj:{}, //销售对象
      sellList:[], //销售车集合
      loginUser:{}, //登陆用户
      cutObj:{}, //商品分页对象
      queryObj:{} //查询条件对象
    }
  },
  methods:{
    getSellList(){//查询销售车商品
      axios.get("/project/sellShop/getSellList").then(resp =>{
        this.sellList = resp.data;

      })
    },
    findByItem(pageNO){//动态条件分页查询商品
      this.queryObj.pageNO = pageNO;
      axios.get("/project/product/findByItemSellPriceNotNull",{
          params:this.queryObj
      }).then(resp =>{
        this.cutObj = resp.data;
        this.showAdd = true;
      })
    },
    showAddDialog(){//显示添加销售商品对话框
      this.findByItem(1);
    },
    addProduct(product){//添加销售车商品
      axios.get("/project/sellShop/addSellProduct",{
        params:{
          productId:product.id
        }
      }).then(resp =>{
          if(resp.data == "ok"){
            this.getSellList();
            this.showAdd = false;//取消遮罩
          }
      })
    },
    updateNumber(shopObj){//修改销售数量
      if(shopObj.number > shopObj.product.saveNumber){//销售车数量大于库存数量
        var num = shopObj.product.saveNumber;
        shopObj.number = num;
      }

      axios.get("/project/sellShop/updateSellInfo",{
        params:{
          productId:shopObj.product.id,
          sellNumber:shopObj.number
        }
      }).then(resp =>{
        if(resp.data == "ok"){
          this.getSellList();
        }
      })
    },
    removeProduct(shopObj){//移除销售车商品
      axios.get("/project/sellShop/removeSell",{
        params:{
          productId:shopObj.product.id
        }
      }).then(resp =>{
        if(resp.data == "ok"){
          this.getSellList();
        }
      })
    },
    computPrice(){//计算销售车总价
        let totalPrice = 0;
        this.sellList.forEach(n =>{
          totalPrice += n.number * n.product.sellPrice;
        })
       return totalPrice;
    },
    outRespository(){//出库
      var einfo = "";
      if(this.sellObj.client==null || this.sellObj.client.trim().length == 0){
        einfo += "客户必须填写";
      }
      if(this.sellList.length == 0){
        einfo += " 请添加销售商品";
      }
      if(einfo.length != 0){
        this.errorInfo = einfo;
        return;
      }

      axios.get("/project/sell/outRespository",{
        params:this.sellObj
      }).then(resp =>{
        if(resp.data == "ok"){
          this.getSellList();
          this.sellObj = {};
        }
      })


    }

  },
  created() {
    this.getSellList();
    var loginInfo = sessionStorage.getItem("loginUser");
    if(loginInfo != null) {
      this.loginUser = JSON.parse(loginInfo);
    }

  }

}
</script>

<style scoped>

</style>